<template>
    <div class="View">
        <div class="tabs">
            <div class="btn" :class="showFlg == 1 ? 'activeBtn' : ''" @click.self="showFlg = 1">
                <span @click.self="showFlg = 1">{{ $t('message.homeExt.tab1.title') }}</span>
            </div>
        </div>
        <!-- <div class="tabs">
            <div class="btn" :class="showFlg == 1 ? 'activeBtn' : ''" @click.self="showFlg = 1">
                <span @click.self="showFlg = 1">{{ $t('message.homeExt.tab1.title') }}</span>
            </div>
            <div class="btn" :class="showFlg == 2 ? 'activeBtn' : ''" @click.self="showFlg = 2">
                <span @click.self="showFlg = 2">{{ $t('message.homeExt.tab2.title') }}</span>
            </div>
            <div class="btn" :class="showFlg == 3 ? 'activeBtn' : ''" @click.self="showFlg = 3">
                <span @click.self="showFlg = 3">{{ $t('message.homeExt.tab3.title') }}</span>
            </div>
        </div> -->

        <!-- <tab1 ref="tab1" class="content" v-show="showFlg == 1" :macStyle="Data" :ComBox="ComBox"
            @extractionCondComboxApi="extractionCondComboxApi"></tab1> -->

        <div class="content">

            <div class="row">
                <div class="label">
                    機種
                </div>
                <el-select class="long-ipt" v-model="Data.ctgCode" placeholder=" "
                    @change="extractionCondComboxApi(Data.ctgCode), Data.stCode = 0">
                    <el-option v-for="item in ComBox.ctgList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    個別機種
                </div>
                <el-select class="long-ipt" v-model="Data.stCode" placeholder=" ">
                    <el-option v-for="item in ComBox.stList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    コロージョンループ
                </div>
                <el-select class="long-ipt" v-model="Data.proKbnCode" placeholder=" ">
                    <el-option v-for="item in ComBox.proKbnList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    ブロック
                </div>
                <el-select class="long-ipt" v-model="Data.sysCode" placeholder=" ">
                    <el-option v-for="item in ComBox.sysList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    適用法規
                </div>
                <el-select class="long-ipt" v-model="Data.lawCode" placeholder=" ">
                    <el-option v-for="item in ComBox.lawList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    検査工事目的
                </div>
                <el-select class="long-ipt" v-model="Data.factorCode" placeholder=" ">
                    <el-option v-for="item in ComBox.factorList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    検査工事項目
                </div>
                <el-select class="long-ipt" v-model="Data.ispClsCode" placeholder=" ">
                    <el-option v-for="item in ComBox.ispClsList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    損傷要因
                </div>
                <el-select class="long-ipt" v-model="Data.causeOfInjuryName" placeholder=" ">
                    <el-option v-for="item in ComBox.causeOfInjuryList" :key="item.key" :label="item.label"
                        :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    保全方式
                </div>
                <el-select class="long-ipt" v-model="Data.consysCode" placeholder=" ">
                    <el-option v-for="item in ComBox.consysList" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>
            </div>
            <div class="row">
                <div class="label">
                    重災管理
                </div>
                <el-select class="long-ipt" v-model="Data.worstHitCode" placeholder=" ">
                    <el-option v-for="item in ComBox.worstHitList" :key="item.key" :label="item.label"
                        :value="item.key">
                    </el-option>
                </el-select>
            </div>
        </div>

        <!-- <tab2 ref="tab2" class="content" v-show="showFlg == 2" :macStyle="Data" :inspRes="Data.inspRes" :isShow="isShow"
            :ComBox="ComBox" @getExtCodSourceComboxApi="getExtCodSourceComboxApi"></tab2>
        <tab3 ref="tab3" class="content" v-show="showFlg == 3" :thickRes="Data.thickRes" :ComBox="ComBox"></tab3> -->

        <footer class="footer-view">
            <button @click="clearFn">{{ $t("message.planView.btn.clear") }}</button>
            <button @click="saveFn">{{ $t("message.planView.btn.get") }}</button>
            <button @click="close">
                {{ $t("message.public.close") }}
            </button>
        </footer>
    </div>
</template>

<script>
import $ from "jquery";
import Tab1 from './tabs/tab1.vue'
import Tab2 from './tabs/tab2.vue'
import Tab3 from './tabs/tab3.vue'
import { showLoading, hideLoading } from "@/utils/loading";
// import { getExtCodSourceByUser, getExtCodSourceCombox, extCodSourceByUser, delCodSourceByUser, getClearMsg, getCtgSymb } from "@/api/api";
import { extractionCondCombox, getExtCodSourceCombox, getCtgSymb, GetExtractionCondDmgCodeList } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';
export default {
    name: "Retrieval",
    data() {
        return {
            showFlg: 1,
            isShow: false,

            macStyle: {},
            inspRes: {},
            thickRes: {},
            macStyleCom: {},
            inspResCom: {},
            thickResCom: {},

            // 总数据
            Data: {
                "pltCode": 2,
                "macType": 1,
                "ctgCode": 0,
                "StCode": 0,
                "stCode": 0,
                "proKbnCode": 0,
                "sysCode": 0,
                "lawCode": 0,
                "factorCode": 1,
                "ispClsName": "",
                "causeOfInjuryName": 1,
                "consysCode": 0,
                "worstHitCode": 5,
                "inspRes": {
                    "form": "",
                    "to": "",
                    "objData": 0,
                    "lineNo": "",
                    "ispClsCode": 0,
                    "ispRes": "",
                    "countermeasures": "",
                    "nextAnnouncement": "",
                    "ispRstCode": 0,
                    "dpsTypeCode": 0,
                    "rangeCode": "",
                    "corrDepth": "",
                    "crrCode": "",
                    "crrStr": "",
                    "rateCode": "",
                    "rateStr": "",
                    "lifeCode": "",
                    "lifeStr": "",
                    "coreLoopCode": 0
                },
                "thickRes": {
                    "corrResCondFlag": 0,
                    "corrReteFlag": false,
                    "corrReteCode": "",
                    "corrReteStr": "",
                    "baseValComparFlag": false,
                    "baseValCompar1Code": "",
                    "baseValCompar11Code": 0,
                    "baseValCompar1Str": "",
                    "baseValCompar2Code": "",
                    "baseValCompar2Str": "",
                    "lifeSearchFlag": false,
                    "lifeSearchCode": "",
                    "lifeSearchStr": "",
                    "baseLife": "",
                    "residualLifeCalcFlag": false,
                    "residualLifeCalcLongTermFlag": true,
                    "residualLifeCalcShortTermFlag": true,
                    "residualLifeCalcMinMultFlag": true
                }
            },
            ComBox: {}
        };
    },
    props: ['styleOptionsValue'],
    components: { Tab1, Tab2, Tab3 },
    watch: {},
    methods: {
        async clearFn() {
            this.Data = await this.getDefaultDataFn();

            setTimeout(() => {
                this.saveFn();
            }, 100);
        },
        // // 清空
        async delCodSourceByUserApi() {

        },
        // 显示确认弹窗
        async showConfirmDialog() {
            let rea = await getClearMsg({});
            await this.$confirm(rea.data.msg, '', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning'
            });
        },

        // 抽出
        async saveFn() {
            console.log('Data', this.Data);
            console.log('ComBox', this.ComBox);
            showLoading()
            let dataJson = {
                ...this.Data,
                pltCode: this.$store.state.pltCode || 2,//	是	int	装置Code
                macType: this.$store.state.macType,
            }

            let res = await GetExtractionCondDmgCodeList(dataJson);
            delete this.Data.Account;
            delete this.Data.pltCode;
            delete this.Data.macType;

            this.$store.state.btn_set_BHView1 = _.isEqual(await this.getDefaultDataFn(), this.Data);
            hideLoading();

            // let res = await GetExtractionCondDmgCodeList(this.Data);
            if (res.data.code == -310) {
                eventBus.$emit('GetMachineByCustomer1', []);
                this.$emit('showRetrievalBtn', 1)
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });

                return
            }
            if (res.data.code != 0) {
                eventBus.$emit('GetMachineByCustomer1', []);
                this.$emit('showRetrievalBtn', 1)
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });

                return
            }
            eventBus.$emit('GetMachineByCustomer1', res.data.data);

            console.log(await this.getDefaultDataFn(), 123, this.Data);
            delete this.Data.Account;
            delete this.Data.pltCode;
            delete this.Data.macType;
            this.$store.state.btn_set_BHView1 = _.isEqual(await this.getDefaultDataFn(), this.Data);
            console.log(this.$store.state.btn_set_BHView1);
            this.$emit('showRetrievalBtn', 1)
        },
        close() {
            this.$emit('showRetrievalBtn', 1);
        },

        // 默认数据
        getDefaultDataFn() {

            return {
                "ctgCode": 0,
                "StCode": 0,
                "stCode": 0,
                "proKbnCode": 0,
                "sysCode": 0,
                "lawCode": 0,
                "factorCode": 1,
                "ispClsName": "",
                "causeOfInjuryName": 1,
                "consysCode": 0,
                "worstHitCode": 5,
                "inspRes": {
                    "form": "",
                    "to": "",
                    "objData": 0,
                    "lineNo": "",
                    "ispClsCode": 0,
                    "ispRes": "",
                    "countermeasures": "",
                    "nextAnnouncement": "",
                    "ispRstCode": 0,
                    "dpsTypeCode": 0,
                    "rangeCode": "",
                    "corrDepth": "",
                    "crrCode": "",
                    "crrStr": "",
                    "rateCode": "",
                    "rateStr": "",
                    "lifeCode": "",
                    "lifeStr": "",
                    "coreLoopCode": 0
                },
                "thickRes": {
                    "corrResCondFlag": 0,
                    "corrReteFlag": false,
                    "corrReteCode": "",
                    "corrReteStr": "",
                    "baseValComparFlag": false,
                    "baseValCompar1Code": "",
                    "baseValCompar11Code": 0,
                    "baseValCompar1Str": "",
                    "baseValCompar2Code": "",
                    "baseValCompar2Str": "",
                    "lifeSearchFlag": false,
                    "lifeSearchCode": "",
                    "lifeSearchStr": "",
                    "baseLife": "",
                    "residualLifeCalcFlag": false,
                    "residualLifeCalcLongTermFlag": true,
                    "residualLifeCalcShortTermFlag": true,
                    "residualLifeCalcMinMultFlag": true
                },
            }
        },

        // 判断是否为管道

        // async getCtgSymbApi() {
        //     let dataJson = {
        //         CtgCode: this.Data.ctgCode,//	是	int	カテゴリCode 
        //     }
        //     const res = await getCtgSymb(dataJson);
        //     this.isShow = Boolean(res.data.data);

        // },

        // 获取下拉框的集合
        async extractionCondComboxApi(PrnCode = 0) {
            // await this.getCtgSymbApi();

            let dataJson = {
                PltCode: this.$store.state.pltCode || 2,//	是	int	装置Code
                PrnCode
            }
            const res = await extractionCondCombox(dataJson);
            this.ComBox = res.data.data;
            // await this.getExtCodSourceComboxApi();

        },

        // 获取下拉框的集合
        // async getExtCodSourceComboxApi() {
        //     await this.getCtgSymbApi();

        //     let dataJson = {
        //         Account: getLocalStorage('userName'),//	是	string	登录账号
        //         PltCode: this.$store.state.pltCode || 9,//	是	int	装置Code
        //         PrnCode: this.Data.ctgCode,//	是	int	カテゴリCode
        //         IspClsCode: this.Data.inspRes.ispClsCode
        //     }
        //     const res = await getExtCodSourceCombox(dataJson);
        //     Object.assign(this.ComBox, {
        //         inspRes: res.data.data.inspRes,
        //         thickRes: res.data.data.thickRes,
        //     });
        // },

        // 第一次，
        async initFn() {
            this.extractionCondComboxApi(this.Data.ctgCode);
            // this.$store.state.btn_set_BHView1 = _.isEqual(await this.getDefaultDataFn(), this.Data);
            this.showFlg = 1;
        },

    },
    created() {

    },
    mounted() {
        this.initFn();

    },
    beforeDestroy() {
        this.$store.state.btn_set_BHView1 = true;
    },
    destroyed() { },
};
</script>

<style lang="scss" scoped>
.View {}

.tabs {
    display: flex;
    padding: 16px;
    height: 32px;

    .btn {
        width: 100%;
        border: 1px solid #C3C3C3;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:nth-child(2) {
            border-left: 0;
            border-right: 0;
        }

        span {
            margin-left: 8px;
        }
    }

    .activeBtn {
        background-color: #106EBE;
        color: #FFF;

    }
}

.content {
    width: 100%;
    height: calc(100% - 110px);
    // background-color: red;
    margin-top: 25px;
    overflow-y: scroll;
    padding-bottom: 50px;

    .row {
        width: 100%;
        display: flex;
        // justify-content: start;
        padding: 7px 0;
        align-items: center;
        padding-left: 16px;

        .label {
            // width: 145px;
            min-width: 145px;
            height: 32px;
            display: flex;
            align-items: center;
        }

        .ipt {
            width: 380px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;

            }
        }

        .right {

            ::v-deep .el-input__inner {
                text-align: right;

            }
        }

        .long-ipt {
            width: 380px;
            height: 32px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }

        .picker {
            // width: 175px;
            height: 32px;
            // margin: 0px 10px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__suffix {
                background: transparent;
            }

            ::v-deep .el-input__icon {
                line-height: 100%;
            }
        }

    }
}

.footer-view {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 47px;
    padding: 0 15px;
    border-top: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    background: #ffffff;

    button {
        min-width: 82px;
        height: 32px;

        border: 1px solid #d9d9d9;
        margin-right: 12px;
        border-radius: 4px;
    }

    button:nth-child(2) {
        background: #106ebe;
        color: #fff;
        padding: 0 15px;
    }

    button:nth-child(3) {
        position: absolute;
        background: #eb7421;
        color: #fff;
        right: 0px;
    }
}
</style>
